<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/5-4'}">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/5-4'}">模块管理</el-breadcrumb-item>
      <el-breadcrumb-item>模块添加</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="formInline" class="moduleadd" :rules="rules" ref="formInline">
      <div>
        <el-form-item label="模块名称" class="elform" prop="management">
          <el-input v-model="formInline.management"></el-input>
        </el-form-item>
        <el-form-item label="模块类别" class="elform" prop="type">
          <el-select v-model="formInline.type" placeholder="请选择">
            <el-option
              v-for="item in formInline.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="父节点" class="elform" v-if="!child">
          <el-select v-model="formInline.fatherId" placeholder="请选择" @change="handlefather">
            <el-option
              v-for="item in fatherid"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Icon" class="elform" prop="icon" v-if="child">
          <el-input v-model="formInline.icon"></el-input>
        </el-form-item>
        <el-form-item label="子模块" class="elform" prop="child" v-show="child">
          <el-select v-model="formInline.child" clearable placeholder="请选择" multiple @change="handlechild">
            <el-option
              v-for="item in childoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="是否显示" class="elform" prop="Menuid" v-if="child">
          <el-select v-model="formInline.Menuid">
            <el-option
              v-for="item in formInline.options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="URL地址" class="elform" prop="url">
          <el-input v-model="formInline.url"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item>
          <el-button type="primary" @click="goback">返回</el-button>
          <el-button type="warning" @click="submitForm('formInline')">保存</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
  import {
    addmodule, editmodule, checkmodule
  } from '@/api/navbar/navbar'

  export default {
    name: "ModuleAdd",
    data() {
      return {
        child: '',
        fatherid: [],
        childid: '',
        childoptions: [],
        formInline: {
          management: '',
          fatherId: '',
          icon: '',
          Menuid: '',
          order: '',
          url: '',
          type: '',
          options: [{
            value: 1,
            label: '子组件'
          }, {
            value: 2,
            label: '父组件'
          }],
          options1: [{
            value: 1,
            label: '显示'
          }, {
            value: 2,
            label: '不显示'
          }]
        },
        rules: {
          management: [
            {
              required: true, message: '请输入模块名称', trigger: 'blur'
            },
            {pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '请输入中文', trigger: 'blur'},
            {min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'},
          ]
        }
      }
    },
    computed: {
      value: function () {
        return this.formInline.type
      }
    },
    watch: {
      value: function (newValue, oldValue) {
        if (newValue == 1) {
          this.child = false;
          return false;
        } else {
          this.child = true;
          return true;
        }
      }
    },
    mounted() {
      this.hanldleid();
    },
    methods: {
      handlefather(val){
        this.formInline.fatherId=val;
      },
      hanldleid() {
        console.log(JSON.parse(this.$route.query.fatherid));
        this.fatherid=JSON.parse(this.$route.query.fatherid);
        this.childoptions = JSON.parse(this.$route.query.childid);
      },
      submitForm(formInline) {
        this.$refs[formInline].validate((valid) => {
          if (valid) {
            let params={};
            params.modelName=this.formInline.management;
            params.modelUrl=this.formInline.url;
            if(this.formInline.type==1){
              params.menuid=1;
            }else {
                params.modelIcon=this.formInline.icon;
                params.menuid=this.formInline.Menuid;
                params.modelPart='';
                for(let item of this.formInline.child){
                  params.modelPart+=item+','
                }
            }
            let _this= this;
            addmodule(params).then(this.handleupdate)
          } else {
            console.log('error submit!!');
            // return false;
          }
        });
      },
      handleupdate(res) {
        this.childid = res.data.id;
        if (this.formInline.type == 1) {
          let params = {};
          params.id = this.formInline.fatherId;
          let _this = this;
          checkmodule(params).then(function (res) {
            let id = _this.formInline.fatherId;
            let params = {};
            params.modelPart = res.data.modelPart+_this.childid+',';
            editmodule(id, params).then(function (res) {
              _this.$router.push({name: 'ModuleManagement'})
            })
          })
        } else {
          this.$router.push({name: 'ModuleManagement'})
        }
      },
      handlechild(val){
        this.formInline.child=val;
      },
      goback() {
        this.$router.push({name: 'ModuleManagement'})
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";

  .wrapper {
    .w100;
    .moduleadd {
      padding: 50px 100px;
      .elform {
        width: 300px;
        /deep/ .el-form-item__label {
          width: 80px;
        }
      }
    }
  }
</style>
